<template>
  <div
    :class="{'hidden':hidden}"
    class="pagination-container"
  >
    <el-pagination
      ref="reference"
      :params="params"
      :background="background"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      :layout="layout"
      :page-sizes="pageSizes"
      :total="nextPage ? totalNum : endTotalHint*1"
      popper-class="pagination-dropdown"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      @keyup.enter="allKeyup($event)"
    >
      <span class="el-pagination__jump">前往
        <el-input-number
          size="mini"
          v-model.enter="vals"
          :controls="false"
          :min="1"
          @blur="showEnter"
          @keyup.enter.native.stop="showEnter"
        />页</span>
    </el-pagination>
    <div
      v-if="nextPage === true"
      class="pagination-info"
    >
      当前显示 <span v-if="total>0">{{ (page-1)*limit+1 }}-{{ page*limit }} </span><span v-else>0-0</span>， 共 <span
        class="total next-page"
        @click="newEnter"
      >{{ totalHint }}</span> 条记录
    </div>
    <div
      v-if="nextPage === false"
      class="pagination-info"
    >
     当前显示 <span v-if="total>0">{{ (page-1)*limit+1 }}-{{ page*limit }} </span><span v-else>0-0</span>， 共 <span class="total">{{ endTotalHint }}</span> 条记录
    </div>
  </div>
</template>

<script>
import { scrollTo } from "../util/scroll-to";
/**
 * 参数说明：
 *  total:接口返回总页数(后台返回参数为total)
 *  page:当前查询页数（后台返回参数为page）
 *  params：查询分页数据
 *  例如：{
 *        page: 1,
 *        rows: 7,
 *        sort: '',
 *        order: '',
 *        pageFlag: true,
 *        onlyCountFlag: false,
 *        parentId: '',
 *        filtersRaw: [{ 'id': '', 'property': 'user_id', 'operator': 'LIKE', 'value': '' }]
 *      }
 *pageSizes：[7, 20, 30, 50, 100]（分页条数选择查询数组）
 *
 *autoScroll：Boolean （是否返回顶部）
 *  limit：每页查询条数（返回参数为rows）
 */

export default {
  name: "Pagination",
  props: {
    total: {
      required: true,
      type: Number,
      default: 0
    },
    page: {
      type: Number,
      default: 1
    },
    params: {
      type: Object,
      default() {
        return {};
      }
    },
    limit: {
      type: Number,
      default: 10
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 30, 50, 100];
      }
    },
    layout: {
      type: String,
      default: "sizes, prev, pager, next, slot"
    },
    background: {
      type: Boolean,
      default: false
    },
    autoScroll: {
      type: Boolean,
      default: true
    },
    hidden: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      totalNum: 0, // 显示条数
      totalHint: 0,
      nextPage: true,
      endTotalHint: 0,
      endTotalNum: 0,
      vals: 1,
      islimit: false
    };
  },
  computed: {
    currentPage: {
      get() {
        return this.page;
      },
      set(val) {
        this.$emit("update:page", val);
      }
    },
    pageSize: {
      get() {
        return this.limit;
      },
      set(val) {
        this.$emit("update:limit", val);
      }
    }
  },
  watch: {
    // total() {
    //   this.freshInfo()
    // }
  },
  mounted() {
    // var then = this
    // this.$refs.reference.$children[4].$el.children[0].querySelector('.el-input__inner').onblur = function () {
    //   const tableRequestParam = new FormData()
    //   tableRequestParam.append('onlyCountFlag', true)
    //   then.$emit('pagination', tableRequestParam)
    // }
    // setTimeout(() => {
    //   this.freshInfo()
    // }, 0);
  },
  methods: {
    showEnter(ev) {
      // const tableRequestParam = new FormData();
      // tableRequestParam.append("onlyCountFlag", true);
      // tableRequestParam.append("page", ev.srcElement.value);
      // this.$emit("pagination", tableRequestParam);
      const tableRequestParam = {}
      tableRequestParam.onlyCountFlag = true
      tableRequestParam.page = ev.srcElement.value
      this.$emit("pagination", JSON.stringify(tableRequestParam));
    },
    newEnter() {
      // const tableRequestParam = new FormData();
      // tableRequestParam.append("onlyCountFlag", true);
      // tableRequestParam.append("page", this.page);
      // this.$emit("pagination", tableRequestParam);
      const tableRequestParam = {}
      tableRequestParam.onlyCountFlag = true
      tableRequestParam.page = this.page
      this.$emit("pagination", JSON.stringify(tableRequestParam));
    },
    /**
     * 数据变化动态更新条数
     * 1.获取每一页显示多少条rows limit
     * 2.用每一页返回多少条数据确定是否有下一页 total
     * 3.假如有下一页用totalNum = page*rows+1 来显示页码
     * 4.当到最后一页将页数
     */
    freshInfo() {
      const total = this.total;
      const rows = this.limit;
      // total > rows说明有下一页
      if (total > this.page * rows) {
        this.nextPage = true;
        this.totalNum = total;
        this.totalHint = `${total - 1}+`;
        this.endTotalHint = `${total - 1}+`;
      } else {
        // 说明已经到最后一页了
        this.nextPage = false;
        this.totalNum = this.page * rows;
        this.endTotalNum = this.page * rows;
        this.totalHint = `${total}`;
        this.endTotalHint = `${total}`;
      }
    },
    handleSizeChange(val) {
      this.islimit = true;
      // const tableRequestParam = new FormData();
      // tableRequestParam.append("page", 1);
      // tableRequestParam.append("rows", this.pageSize);
      // tableRequestParam.append("sort", this.params.sort);
      // tableRequestParam.append("order", this.params.order);
      // tableRequestParam.append("pageFlag", this.params.pageFlag);
      // tableRequestParam.append("onlyCountFlag", this.params.onlyCountFlag);
      // tableRequestParam.append(
      //   "filtersRaw",
      //   JSON.stringify(this.params.filtersRaw)
      // );
      // tableRequestParam.append(
      //   "sortersRow",
      //   JSON.stringify(this.params.sortersRow)
      // );
      const tableRequestParam = {}
      tableRequestParam.page = 1
      tableRequestParam.rows = this.pageSize
      tableRequestParam.sort = this.params.sort
      tableRequestParam.order = this.params.order
      tableRequestParam.pageFlag = this.params.pageFlag
      tableRequestParam.onlyCountFlag = this.params.onlyCountFlag
      tableRequestParam.filtersRaw = JSON.stringify(this.params.filtersRaw)
      tableRequestParam.sortersRow = JSON.stringify(this.params.sortersRow)
      setTimeout(() => {
        this.$emit("pagination", JSON.stringify(tableRequestParam), "chengPage");
      }, 0);
      setTimeout(() => {
        this.islimit = false;
      }, 500);
      if (this.autoScroll) {
        scrollTo(0, 800);
      }
    },
    handleCurrentChange(val) {
      setTimeout(() => {
        this.vals = val;
        // const tableRequestParam = new FormData();
        // tableRequestParam.append("page", val);
        // tableRequestParam.append("rows", this.pageSize);
        // tableRequestParam.append("sort", this.params.sort);
        // tableRequestParam.append("order", this.params.order);
        // tableRequestParam.append("pageFlag", this.params.pageFlag);
        // tableRequestParam.append("onlyCountFlag", this.params.onlyCountFlag);
        // tableRequestParam.append(
        //   "filtersRaw",
        //   JSON.stringify(this.params.filtersRaw)
        // );
        // tableRequestParam.append(
        //   "sortersRow",
        //   JSON.stringify(this.params.sortersRow)
        // );
         const tableRequestParam = {}
        tableRequestParam.page = val
        tableRequestParam.rows = this.pageSize
        tableRequestParam.sort = this.params.sort
        tableRequestParam.order = this.params.order
        tableRequestParam.pageFlag = this.params.pageFlag
        tableRequestParam.onlyCountFlag = this.params.onlyCountFlag
        tableRequestParam.filtersRaw = JSON.stringify(this.params.filtersRaw)
        tableRequestParam.sortersRow = JSON.stringify(this.params.sortersRow)
        if (this.islimit === true) {
          this.islimit = false;
        } else {
          this.$emit("pagination", JSON.stringify(tableRequestParam));
          if (this.autoScroll) {
            scrollTo(0, 800);
          }
        }
      }, 0);
    }
  }
};
</script>

<style lang="scss" scoped>
.el-pagination__jump {
  display: inline-block;
  position: relative;
  height: 28px;
  line-height: 28px;
  margin: 0 20px;
  /deep/ .is-without-controls {
    margin: 0 4px;
    width: 50px !important;
    /deep/ input {
      height: 28px;
    }
  }
}
.next-page {
  cursor: pointer;
}
</style>
